let $timerBtn = (function(){
  let $btn = $('<input type="button" class="timer-button">'),
      cfg = {
        container: 'body',
        title: '同意',
        delay: 6,
        enable: false,
        onClick: null
        
      },
      delay = 6,
      timer = null;

  $btn.css({
    height: '50px',
    width: '150px',
    'font-size': '1.2em'
  });


  function show(config){
    // gen dom
    
    $.extend(cfg,config);
    $(cfg.container).append($btn);

    $btn.val(cfg.title+'（'+ cfg.delay + 's)');
    $btn.attr('disabled','disabled');

    timer = setInterval(()=>{
    
      $btn.val(cfg.title + '（'+ --delay + 's)');
      if(delay == 0){
        clearInterval(timer);
        $btn.val('同意');
        $btn.removeAttr('disabled');
      }
    },1000);

    
    // event bind
    $btn.click(cfg.onClick);
  }

  function destroy(){
    $btn.remove();
  }
  
  return {
    show,destroy
  }

})()




  
  
  
 


/*UI组建的面向对象封装，三种方式
  1. {} Object
  let $timerBtn = {
    show: function(){}
  };

  2. 工厂函数（匿名函数的立即执行表达式 + 闭包）-> 全局对象
  let $timerBtn = (function(){
    // ...
    return {
      show
    }
  })();

  使用：
  $timerBtn.show()

  3. 构造函数
  function TimerBtn(){
    this.show = function(){}
  }

  使用：
  let btn = new TimerBtn();
  btn.show();


 * */
